<template>
	<view class="page">
		<view>
			<view class="info">
				<view class="i_date">
					<view>
						<text>{{ goback ? '第1程' : '出发' }}</text>
						<text>{{ cfDate }}</text>
						<text>{{ cfWeek }}</text>
						<text>{{ item.sailTime }}</text>
					</view>
					<u-icon v-if="item.timeMemosStr" :label="item.timeMemosStr" color="#fff" labelColor="#fff" :labelSize="26" size="26" space="4"
						name="clock"></u-icon>
				</view>
				<view class="i_address">
					<text>{{ item.startPortName }}</text>
					<text>-</text>
					<text>{{ item.endPortName }}</text>
				</view>
				<view class="i_ship">
					<view>{{ item.lineNum+''+item.sx }}次</view>
					<view>{{ item.clxm }}</view>
					<view>{{ carShow ? '' : item.cangInfo.className || '' }}</view>
				</view>
				<view class="i_line"></view>
				<view class="i_memo">
					<view class="im_left">
						<view class="iml_box">票价</view>
						<view class="iml_text" v-if="!carShow">
							¥{{ item.cangInfo.totalPrice || '' }}/成人，¥{{ item.cangInfo.halfPrice || '' }}/儿童
						</view>
						<view class="iml_text" v-else>
							<text>¥{{ item.carInfo.totalPrice }}/{{ item.carInfo.className }}</text>
							<text v-if="item.cangInfo">¥{{ item.cangInfo.totalPrice || '' }}/{{ item.cangInfo.className || ''
								}}</text>
						</view>
					</view>
					<view class="im_right" @tap="toInstructions">
						<image class="imr_img1" src="@/static/index/steamerTicket/icon_explain_yellow.png" mode="">
						</image>
						<text>取退改票说明</text>
						<image class="imr_img2" src="@/static/index/steamerTicket/icon_yjt_yellow.png" mode="">
						</image>
					</view>
				</view>
			</view>
			<view class="info" v-if="goback" style="margin-top: 20rpx;background: #35A091;">
				<view class="i_date">
					<view>
						<text>第2程</text>
						<text>{{ backItem.fhDate }}</text>
						<text>{{ backItem.fhWeek }}</text>
						<text>{{ backItem.sailTime }}</text>
					</view>
					<u-icon v-if="backItem.timeMemosStr" :label="backItem.timeMemosStr" color="#fff" labelColor="#fff" :labelSize="26" size="26" space="4"
						name="clock"></u-icon>
				</view>
				<view class="i_address">
					<text>{{ backItem.startPortName }}</text>
					<text>-</text>
					<text>{{ backItem.endPortName }}</text>
				</view>
				<view class="i_ship">
					<view>{{ backItem.lineNum+''+backItem.sx }}次</view>
					<view>{{ backItem.clxm }}</view>
					<view>{{ carShow ? '' : backItem.cangInfo.className || '' }}</view>
				</view>
				<view class="i_line"></view>
				<view class="i_memo">
					<view class="im_left">
						<view class="iml_box">票价</view>
						<view class="iml_text" v-if="!carShow">
							¥{{ backItem.cangInfo.totalPrice || '' }}/成人，¥{{ backItem.cangInfo.halfPrice || '' }}/儿童
						</view>
						<view class="iml_text" v-else>
							<text>¥{{ backItem.carInfo.totalPrice }}/{{ backItem.carInfo.className }}</text>
							<text v-if="backItem.cangInfo">¥{{ backItem.cangInfo.totalPrice || '' }}/{{ backItem.cangInfo.className ||
								'' }}</text>
						</view>
					</view>
					<view class="im_right" @tap="toInstructions">
						<image class="imr_img1" src="@/static/index/steamerTicket/icon_explain_yellow.png" mode="">
						</image>
						<text>取退改票说明</text>
						<image class="imr_img2" src="@/static/index/steamerTicket/icon_yjt_yellow.png" mode="">
						</image>
					</view>
				</view>
			</view>
			<view class="notice_info">
				<u-icon name="info-circle" color="#FEA400" size="32rpx"></u-icon>
				<text>免票儿童也须购票。每一成人旅客可免费携带(未满6周岁或身高1.2米以下)的儿童2人，请您在购票的同时登记携童实名信息。超过2人时，应按超过的人数购买半价票。</text>
			</view>
			<view class="" style="background-color: #F5F8FA; padding: 20rpx 0rpx;">
				<view class="passenger" v-if="carShow && !goback">
					<text>添加车辆</text>
					<view class="p_add" @tap="addCars">
						<image src="@/static/index/steamerTicket/icon_add.jpg" mode=""></image>
						<text>添加车辆</text>
					</view>
					<view class="passengers">
						<view v-for="(item, index) in passengerCarList" :key="index">
							<image class="p_del" src="@/static/index/steamerTicket/icon_delete.jpg" @tap="delPassengerCar(index)">
							</image>
							<view class="p_info">
								<view class="pi_top">
									<view class="name">
										<text>{{ item.nameCopy }}</text>
										<view>{{ item.type }}</view>
										<view>{{ item.cartype }}</view>
									</view>
									<image src="@/static/my/commonInformation/icon_edit.png" mode="" @tap="editCar(item, index)">
									</image>
								</view>
								<view class="pi_idcard">
									车牌号<span>{{ item.carno }}</span>
								</view>
								<view class="pi_idcard">
									{{ cardCfg[item.cardType] }}<span>{{ item.idcardCopy }}</span>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="passenger">
					<view class="p_title">
						<text>{{ carShow ? '添加同乘人' : '添加乘客' }}</text>
						<span>最多可添加{{ personLimit }}人</span>
					</view>
					<view class="p_add" @tap="toAddPassenger">
						<image src="https://i.ringzle.com/file/20240220/252d9e98273742aa885e45eb973e84db.png" mode="">
						</image>
						<text>添加乘客</text>
					</view>
					<view class="passengers">
						<view class="p_item_new" v-for="(item, index) in passengerList" :key="index">
							<view class="pin_top">
								<image class="p_del" src="@/static/index/steamerTicket/icon_delete.jpg"
									@tap="delPassenger(item, index)"></image>
								<view class="pint_right">
									<view class="pintr_info">
										<text class="name">{{ item.passengerNameCopy }}</text>
										<text class="card">{{ cardCfg[item.cardType] }} {{ item.cardCopy }}</text>
										<view class="type">{{ typeCfg[item.personType] || '' }}</view>
									</view>
									<view class="pintr_add" v-if="item.personType == 1">
										<text>携带免票儿童：{{ (item.mpChildList && item.mpChildList.length) || 0 }}</text>
										<view class="add" @tap="addMpChild(item, index)"><span>+</span><text>添加</text></view>
									</view>
								</view>
							</view>
							<view class="pin_childs" v-if="item.mpChildList && item.mpChildList.length > 0">
								<view class="pc_item" v-for="(mpc, idx) in item.mpChildList" :key="idx">
									<text class="title">携童{{ idx + 1 }}</text>
									<text class="name">{{ mpc.nameCopy }}</text>
									<text class="card">{{ cardCfg[item.cardType] }} {{ mpc.cardCopy }}</text>
									<view class="type">{{ typeCfg[mpc.personType] || '' }}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="" style="padding-bottom: 100rpx;">
					<view class="contacts">
						<view class="c_info" v-if="!carShow">
							<text>联系人信息</text>
							<view class="ci_inp mt48">
								<text>姓名</text>
								<input type="text" v-model="name" @blur="setName" @confirm="setName" placeholder="请填写姓名">
							</view>
							<view class="ci_line"></view>
							<view class="ci_inp">
								<text>手机号</text>
								<view class="" style="display: flex; align-items: center;">
									<input type="phone" v-model="phone" @blur="setPhone" @confirm="setPhone" placeholder="请填写手机号">
									<image @click="delSetPhone"
										src="https://i.ringzle.com/file/20240220/5a3ab97d7ea647088be633d307b49dd4.png" mode=""></image>
								</view>
							</view>
						</view>
						<view class="c_info" v-else>
							<view class="ci_inp">
								<text>手机号</text>
								<view class="" style="display: flex; align-items: center;">
									<input type="phone" v-model="phone" @blur="setPhone" @confirm="setPhone" placeholder="请填写手机号">
									<image @click="delSetPhone"
										src="https://i.ringzle.com/file/20240220/5a3ab97d7ea647088be633d307b49dd4.png" mode=""></image>
								</view>
							</view>
						</view>
					</view>
					<view class="cellBox2" @click="couponList">
						<view class="cellBox-left">
							<text slot="icon" class="icon">券</text>
							<view slot="title" class="title">
								<text>优惠券</text>
							</view>
						</view>
						<view class="cellBox-right">
							<view class="cellBox-text">
								<text v-if="couponInfo.length==0">暂未选择优惠券</text>
								<text v-else>{{couponInfo.name}}</text>
							</view>
							<view class="image">
								<image src="https://i.ringzle.com/file/20240123/3cf0f794b73d4cf691371408fbd3b5e3.png"
									mode="aspectFill">
								</image>
							</view>
						</view>
					</view>
					<view class="agree">
						<image src="https://i.ringzle.com/file/20231027/db588133d67548fc82dfb0d128eac9a8.png" v-if="!agree"
							@tap="agree = !agree">
						</image>
						<image src="https://i.ringzle.com/file/20240227/9f378e2e344242c6837c5c35dd2c0ec5.png" v-else
							@tap="agree = !agree"></image>
						<text>我已阅读并同意船票</text>
						<text @tap="showXy">预订协议</text>
					</view>
				</view>

				<view class="bottom">
					<view class="b_left">
						<view>￥
							<span v-if="couponInfo.length==0">{{Math.round(price*100)/100}}</span>
							<span v-else-if="couponInfo.length!=0 && price > couponInfo.price">{{Math.round((price - couponInfo.price)*100)/100}}</span>
							<span v-else>0.01</span>
						</view>
					</view>
					<view class="b_right">
						<view class="br_right" @tap="createOrder">
							立即预订
						</view>
					</view>
				</view>
			</view>
			<!-- 微信支付 -->
			<WechatPay ref="wxPay" @confirmPay="toPay" @cancelPay="cancelPay"></WechatPay>
			<!-- 添加/选择乘客 -->
			<u-popup :show="addShow" @close="addShow = false">
				<view class="details">
					<view class="title">
						<text>乘客信息</text>
						<image src="@/static/index/steamerTicket/icon_close.png" @tap="addShow = false"></image>
					</view>
					<view class="has_info">
						<view class="add_user" @tap="addPerson">
							<image src="https://i.ringzle.com/file/20240220/252d9e98273742aa885e45eb973e84db.png" mode=""></image>
							<text>新增</text>
						</view>
						<view class="add_list" v-if="addList.length > 0">
							<u-swipe-action>
								<u-swipe-action-item :options="options" v-for="(item, index) in addList" :key="index"
									@click="deletePerson(item)" :ref="'swipeAction' + index" v-if="item.passengerName">
									<view class="swipe-action u-border-top u-border-bottom">
										<view class="swipe-action__content">
											<view class="sac_item">
												<image class="chk" @tap="selectPerson(index, item)"
													:src="item.isSelect ? 'https://i.ringzle.com/file/20240220/ab1b5e0ebe964bdca8b4a6230163e93d.png' : 'https://i.ringzle.com/file/20231027/db588133d67548fc82dfb0d128eac9a8.png'">
												</image>
												<view class="si_info">
													<view class="name">
														<view>{{ item.passengerNameCopy }}</view>
														<view>{{ typeCfg[item.personType] }}</view>
													</view>
													<view class="idcard">
														<text>{{ cardCfg[item.cardType] }}</text>
														<text>{{ item.cardCopy }}</text>
													</view>
												</view>
												<image class="edit" src="@/static/my/commonInformation/icon_edit.png" @tap="toEdit(item)">
												</image>
											</view>
										</view>
									</view>
								</u-swipe-action-item>
							</u-swipe-action>
						</view>
					</view>
					<view class="add_submit" @tap="confirmAdd">确定</view>
				</view>
			</u-popup>
			<!-- 授权手机登录 -->
			<GetPhoneNumber ref="phoneNumber" @loginSuccess="loginSuccess"></GetPhoneNumber>
			<!-- 非本地人公共舱不足提示 -->
			<view class="local_box" v-if="localShow" :style="{ 'height': (h + 90) + 'px' }">
				<view class="lb_content">
					<view class="lbc_tip">该舱位公共舱座位已售罄，若您非本地居民，请选择其他舱位或航班。</view>
					<view class="lbc_btn" @tap="localShow = false">确定</view>
					<image src="https://i.ringzle.com/file/20231120/4ec5563f16d94b70be7faec7afc0f0ad.png"></image>
				</view>
			</view>
			<!-- 预订时免票儿童提示 -->
			<view class="local_box" v-if="mpTipShow" :style="{ 'height': (h + 90) + 'px' }">
				<view class="lb_content">
					<view class="lbc_tip">免票儿童需购买<span style="font-weight: bolder;">0元票</span>，请确认是否已添加出行儿童信息，以免耽误行程。</view>
					<view class="lbc_btns">
						<view class="lb_qx" @tap="mpTipShow = false">取消</view>
						<view class="lb_qd" @tap="confirmMpAdd">确定</view>
					</view>
					<image src="https://i.ringzle.com/file/20240429/1876883b5065422a9d5b96518f421ed8.png"></image>
				</view>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
import customNavBar1 from '@/compoments/uNavBar1/index2.vue'
import WechatPay from '@/compoments/wechatPay/index.vue'
import GetPhoneNumber from '@/compoments/Getphonenumber/index.vue'
export default {
	options: {
		styleIsolation: 'shared'
	},
	name: 'passengerPay',
	components: {
		GetPhoneNumber,
		WechatPay,
		customNavBar1
	},
	props:{
		isCxghDc:{
			typeof:Boolean,
			default:false
		},
		coupon:{
			typeof:Array,
			default: []
		}
	},
	watch: {
	    coupon(newVal, oldVal) {
	      this.couponInfo = newVal
	      // 你可以在这里根据prop的变化执行一些逻辑
	    }
	  },
	data() {
		return {
			couponInfo:[],
			h: uni.getSystemInfoSync().windowHeight - 66,
			mt: uni.getSystemInfoSync().statusBarHeight + 44,
			item: '',
			backItem: '',
			name: '',
			phone: '',
			agree: false,
			show: false,
			price: 0,
			detailsShow: false,
			passengerList: [],
			passengerCarList: [],
			addShow: false,
			addList: [],
			typeCfg: {
				1: '成人票',
				2: '儿童票',
				3: '免票儿童',
				4: '老人票'
			},
			cardCfg: this.$uct.typeToText,
			options: [{
				text: '删除'
			}],
			carShow: false,
			goback: false,
			cfDate: '',
			cfWeek: '',
			weeks: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
			lsKey: '',
			mxList: [],
			backMxList: [],
			orderId: '',
			localShow: false,
			mpChild: false,//查询乘客信息时是否查免票儿童的数据
			mpIndex: '',
			personLimit: 10,//最多可添加乘客的数量
			mpTipShow: false,
			mpTicketNum: '',//免票儿童票数量
		}
	},
	methods: {
		couponList(){
			console.log("787")
			let price
			price = this.price
			console.log(price)
			uni.navigateTo({
			    url: `/pagesMy/coupon/useList?type=3&price=${price}`,
				complete(res) {
					console.log(res)
				}
			});
		},
		init(item, backItem) {
			if (uni.getStorageSync('userInfo')) {
				this.name = JSON.parse(uni.getStorageSync('userInfo')).realName;
				this.phone = JSON.parse(uni.getStorageSync('userInfo')).mobile;
			}

			this.item = item;
			this.cfDate = new Date(this.item.sailDate).Format('MM月dd日');
			this.cfWeek = this.weeks[new Date(this.item.sailDate).getDay()];

			if (backItem) {
				this.goback = true;
				this.backItem = backItem;
				this.backItem.fhDate = new Date(this.backItem.sailDate).Format('MM月dd日');
				this.backItem.fhWeek = this.weeks[new Date(this.backItem.sailDate).getDay()];
			}

			//获取乘客
			this.getPassengers();
		},
		setName(e) {
			this.name = e.detail.value;
		},
		setPhone(e) {
			this.phone = e.detail.value;
		},
		// 清除号码 
		delSetPhone() {
			this.phone = ''
		},
		//获取乘客
		getPassengers() {
			this.lsKey = 'getPassenger';
			this.$login().then(res => {
				if (res === 0) this.toGetPassengers();
				else this.$refs['phoneNumber'].show = true;
			})
		},
		toGetPassengers(callback) {
			this.$api.get('/api/commonPerson/list', {
				openId: JSON.parse(uni.getStorageSync('userInfo')).openId
			}).then(res => {
				if (res.data.code === 0) {
					this.addList = this.$uct.setPersonType(res.data.data);
					if (this.mpChild) this.addList = this.addList.filter(l => l.personType == 3);
					else this.addList = this.addList.filter(l => l.personType != 3);
					this.addList.forEach((d, i) => {
						d.passengerNameCopy = this.$aesTm.tuomin(d.passengerName, 1);
						d.cardCopy = this.$aesTm.tuomin(d.card, 3);
						this.$set(this.addList[i], 'isSelect', false);
					})
					callback && callback()
				} else this.$showModal(res.data.msg);
			})
		},
		showXy() {
			uni.navigateTo({
				url: '/pagesIndex/steamerTicket/ticketingInstructions'
			})
		},
		toPay() {
			this.lsKey = 'toPay';
			this.$login().then(res => {
				if (res === 0) return this.confrimPay();
				else this.$refs['phoneNumber'].show = true;
			})
		},
		cancelPay(){
			let url = '/pagesMy/shipTicketOrder/details?orderId=' + this.orderId;
			if (this.goback || this.isCxghDc) url = '/pagesMy/order/index?name=船票&type=1&typeIndex=0';
			uni.redirectTo({
				url
			})
		},
		confrimPay() {
			this.$api.post('/order/icbc/createOrder', { //下单
				orderCode: this.orderId,
				tradeType: 'JSAPI',
				openId: JSON.parse(uni.getStorageSync('userInfo')).openId
			}, false).then(res => {
				if (res.statusCode == 200 && res.data != null) {
					this.$refs.wxPay.payShow = false;
					this.$wxPay(res.data).then(result => {
						this.$emit('toPayResult', {
							price: this.price,
							orderId: this.orderId,
							endPortName: this.item.endPortName
						});
					})
				}
			})
		},
		//登录成功后处理事件
		loginSuccess(res) {
			if (this.lsKey == 'getPassenger') this.toGetPassengers();
			if (this.lsKey == 'toPay') this.confrimPay();
			this.name = JSON.parse(uni.getStorageSync('userInfo')).realName;
			this.phone = JSON.parse(uni.getStorageSync('userInfo')).mobile;
		},
		delPassenger(item, index) {
			this.couponInfo = []
			this.passengerList.splice(index, 1);
			let itemPrice = 0;
			if (item.personType == 1) { //成人
				if (this.goback) { //往返
					if (item.discounts) itemPrice = this.item.cangInfo.localPrice + this.backItem.cangInfo
						.localPrice; //本地人
					else itemPrice = this.item.cangInfo.totalPrice + this.backItem.cangInfo.totalPrice;
				} else {
					if (item.discounts) itemPrice = this.item.cangInfo.localPrice || 0;
					else itemPrice = this.item.cangInfo.totalPrice || 0;
				}
			} else { //儿童
				if (this.goback) { //往返
					if (item.discounts) itemPrice = this.item.cangInfo.localHalfPrice + this.backItem.cangInfo
						.localHalfPrice; //本地人
					else itemPrice = this.item.cangInfo.halfPrice + this.backItem.cangInfo.halfPrice;
				} else {
					if (item.discounts) itemPrice = this.item.cangInfo.localHalfPrice || 0;
					else itemPrice = this.item.cangInfo.halfPrice || 0;
				}
			}
			this.price -= itemPrice;
			if (!this.goback) {
				if (this.mxList.length > 0) {
					if (item.personType == 1 && !item.discounts) this.mxList[0].num--;
					if (item.personType == 1 && item.discounts) this.mxList[1].num--;
					if (item.personType == 2 && !item.discounts) this.mxList[2].num--;
					if (item.personType == 2 && item.discounts) this.mxList[3].num--;
				}
			} else {
				if (this.backMxList.length > 0) {
					if (item.personType == 1 && !item.discounts) {
						this.backMxList[0].num--;
						this.backMxList[4].num--;
					}
					if (item.personType == 1 && item.discounts) {
						this.backMxList[1].num--;
						this.backMxList[5].num--;
					}
					if (item.personType == 2 && !item.discounts) {
						this.backMxList[2].num--;
						this.backMxList[6].num--;
					}
					if (item.personType == 2 && item.discounts) {
						this.backMxList[3].num--;
						this.backMxList[7].num--;
					}
				}
			}

			if (this.price == 0) {
				this.mxList = [];
				if (this.goback) this.backMxList = [];
			}
		},
		delPassengerCar(index) {
			this.couponInfo = []
			this.passengerCarList.splice(index, 1);
			this.price -= this.item.carInfo.totalPrice;
		},
		addPerson() {
			this.$login().then(res => {
				if (res === 0) {
					uni.navigateTo({
						url: '/pagesMy/commonInformation/add?type=ship',
						events: {
							addPassengerSuccess: data => {
								this.toGetPassengers();
							}
						}
					})
				} else this.$refs['phoneNumber'].show = true;
			})
		},
		addCars() {
			this.$login().then(res => {
				if (res === 0) {
					let selectInfo = {
						passengers: this.passengerList,
						passengerCars: this.passengerCarList
					};
					uni.navigateTo({
						url: '/pagesIndex/steamerTicket/addCar?selectInfo=' + JSON.stringify(
							selectInfo),
						events: {
							addDriverSuccess: data => {
								if (this.item.carInfo) data.cartype = this.item.carInfo.className;
								this.passengerCarList = [...this.passengerCarList, data];
								this.price += this.item.carInfo.totalPrice;
							}
						}
					})
				} else this.$refs['phoneNumber'].show = true;
			})
		},
		editCar(item, index) {
			uni.navigateTo({
				url: '/pagesIndex/steamerTicket/addCar?item=' + JSON.stringify(item),
				events: {
					addDriverSuccess: data => {
						if (this.item.carInfo) data.cartype = this.item.carInfo.className;
						this.$set(this.passengerCarList, index, data);
					}
				}
			})
		},
		//选择乘客
		selectPerson(index, item) {
			if (this.mpChild) {
				if (item.mpSelected) return this.uToastShow('该免票儿童已添加');
				else {
					this.$set(this.addList[index], 'isSelect', !this.addList[index].isSelect);
					let sLen = this.addList.filter(a => a.isSelect).length;
					if (item.isSelect && sLen > 2) {
						return this.uToastShow('每一成人旅客可免费携带(未满6周岁或身高1.2米以下)的儿童2人，超过2人时，应按超过的人数购买半价票。')
					}
				}
				return
			}

			let newCard = JSON.parse(JSON.stringify(item.card));
			this.$api.post('/travel/ship/ticket/passager/iolocal', {
				credentialType: item.cardType,
				credentialNum: this.$aesTm.encrypt(newCard)
			}).then(res => {
				if (res.data.code === 0) {
					if (res.data.data == 0) { //非本地人
						if ((!this.goback && this.item.cangInfo.pubCurrentCount == 0) ||
							(this.goback && (this.item.cangInfo.pubCurrentCount == 0 || this.backItem.cangInfo
								.pubCurrentCount == 0))) {
							this.addShow = false;
							this.localShow = true;
						} else {
							if (item.isDriver) return this.$showToast('该乘客已成为司机，不可选择');
							this.$set(this.addList[index], 'isSelect', !this.addList[index].isSelect);
						}
					} else {
						if (item.isDriver) return this.$showToast('该乘客已成为司机，不可选择');
						this.$set(this.addList[index], 'isSelect', !this.addList[index].isSelect);
					}
				} else this.$showModal(res.data.msg);
			})
		},
		toEdit(item) {
			uni.navigateTo({
				url: '/pagesMy/commonInformation/add?type=ship&item=' + JSON.stringify(item),
				events: {
					editPassengerSuccess: data => {
						this.toGetPassengers();
					}
				}
			})
		},
		deletePerson(item) {
			this.couponInfo = []
			this.$api.del('/api/commonPerson', [item.id]).then(res => {
				if (res.data.code === 0) {
					this.addList.forEach((d, i) => {
						this.$refs['swipeAction' + i][0].closeHandler();
					})
					this.toGetPassengers();
					let fidx = this.passengerList.findIndex(d => d.id == item.id);
					if (fidx > -1) this.passengerList.splice(fidx, 1);
				} else this.$showModal(res.data.msg)
			})
		},
		async confirmAdd() {
			this.couponInfo = []
			if (!this.mpChild) {
				let temp = this.addList.filter(d => d.isSelect == true);
				if (temp.length == 0) this.passengerList = [];
				else {
					let clone = JSON.parse(JSON.stringify(this.passengerList));
					this.passengerList = new Array(temp.length);
					temp.forEach((t, i) => {
						let _t = clone.find(c => c.card == t.card);
						if (_t) this.passengerList[i] = _t;
						else this.passengerList[i] = t
					})
				}

				if (this.passengerList.length == 0) return this.$showToast('请至少添加一名乘客');
				let pcount = this.passengerList.length;
				let ccount = 0;
				this.passengerList.forEach(p => ccount += (p.mpChildList ? p.mpChildList.length : 0));
				if (pcount + ccount > this.personLimit) return this.$showToast('最多可添加' + this.personLimit + '名乘客');

				let promise = this.passengerList.map(async (d,i)=>{
					d.passengerNameCopy = this.$aesTm.tuomin(d.passengerName, 1);
					d.cardCopy = this.$aesTm.tuomin(d.card, 3);
					this.$set(this.passengerList[i], 'childs', 0);
					if (!this.passengerList[i].mpChildList || this.passengerList[i].mpChildList.length == 0) {
						this.$set(this.passengerList[i], 'mpChildList', []);
					}
					let newCard = JSON.parse(JSON.stringify(d.card));
					await this.getPassagerIolocal(d.cardType,newCard,i)
				})
				await Promise.all(promise);
				this.dealTotalPrice();
				this.name = this.passengerList[0].passengerName;
				this.phone = JSON.parse(uni.getStorageSync('userInfo')).mobile;
				this.addShow = false;
			} else {
				let list = this.addList.filter(d => d.isSelect == true);
				let pcount = this.passengerList.length;
				let ccount = 0;
				this.passengerList.forEach(p => ccount += p.mpChildList.length);
				let currentNum = this.passengerList[this.mpIndex].mpChildList.length;
				if (pcount + ccount + list.length - currentNum > this.personLimit) return this.$showToast('最多可添加' + this.personLimit + '名乘客');

				list.forEach((d, i) => {
					d.nameCopy = this.$aesTm.tuomin(d.passengerName, 1);
					d.cardCopy = this.$aesTm.tuomin(d.card, 3);
				})
				if (this.mpIndex !== '') this.$set(this.passengerList[this.mpIndex], 'mpChildList', list);
				this.addShow = false;
			}
		},
		getPassagerIolocal(credentialType,newCard,i){
			return new Promise((resolve,reject)=>{
				this.$api.post('/travel/ship/ticket/passager/iolocal', {
					credentialType,
					credentialNum: this.$aesTm.encrypt(newCard)
				}).then(res => {
					if (res.data.code === 0) {
						this.$set(this.passengerList[i], 'discounts', parseInt(res.data.data || 0));
						resolve();
					} else this.$showModal(res.data.msg);
				})
			})
		},
		//计算总价
		dealTotalPrice() {
			this.price = this.carShow ? (this.passengerCarList.length > 0 ? this.item.carInfo.totalPrice * this
				.passengerCarList.length : 0) : 0;
			this.passengerList.forEach((d, i) => {
				if (d.personType == 1) {
					if (d.discounts && d.discounts == 1) { //优惠

					}
					this.price += (d.discounts ? (+this.item.cangInfo.localPrice || 0) : (+this.item.cangInfo
						.totalPrice || 0));
					if (this.goback) this.price += (d.discounts ? (+this.backItem.cangInfo.localPrice || 0) : (
						+this.backItem.cangInfo.totalPrice || 0));
				}
				if (d.personType == 2) {
					if (d.discounts && d.discounts == 1) { //优惠

					}
					this.price += (d.discounts ? (+this.item.cangInfo.localHalfPrice || 0) : (+this.item
						.cangInfo.halfPrice || 0));
					if (this.goback) this.price += (d.discounts ? (+this.backItem.cangInfo.localHalfPrice ||
						0) : (+this.backItem.cangInfo.halfPrice || 0));
				}
			})
			let cnum = this.passengerList.filter(d => d.personType == 1 && !d.discounts).length;
			let cnum_local = this.passengerList.filter(d => d.personType == 1 && d.discounts).length;
			let ernum = this.passengerList.filter(d => d.personType == 2 && !d.discounts).length;
			let ernum_local = this.passengerList.filter(d => d.personType == 2 && d.discounts).length;
			this.mxList = [{
				type: '成人票',
				price: this.item.cangInfo.totalPrice || 0,
				num: cnum
			}, {
				type: '成人票(本地)',
				price: this.item.cangInfo.localPrice || 0,
				num: cnum_local
			},
			{
				type: '儿童票',
				price: this.item.cangInfo.halfPrice || 0,
				num: ernum
			},
			{
				type: '儿童票(本地)',
				price: this.item.cangInfo.localHalfPrice || 0,
				num: ernum_local
			}
			];
			if (this.goback) {
				this.backMxList = [{
					type: '返程',
					from: this.backItem.startPortName,
					to: this.backItem.endPortName,
					ticket: '成人票',
					price: this.backItem.cangInfo.totalPrice,
					num: cnum
				},
				{
					type: '返程',
					from: this.backItem.startPortName,
					to: this.backItem.endPortName,
					ticket: '成人票(本地)',
					price: this.backItem.cangInfo.localPrice,
					num: cnum_local
				},
				{
					type: '返程',
					from: this.backItem.startPortName,
					to: this.backItem.endPortName,
					ticket: '儿童票',
					price: this.backItem.cangInfo.halfPrice,
					num: ernum
				},
				{
					type: '返程',
					from: this.backItem.startPortName,
					to: this.backItem.endPortName,
					ticket: '儿童票(本地)',
					price: this.backItem.cangInfo.localHalfPrice,
					num: ernum_local
				},
				{
					type: '去程',
					from: this.item.startPortName,
					to: this.item.endPortName,
					ticket: '成人票',
					price: this.item.cangInfo.totalPrice,
					num: cnum
				},
				{
					type: '去程',
					from: this.item.startPortName,
					to: this.item.endPortName,
					ticket: '成人票(本地)',
					price: this.item.cangInfo.localPrice,
					num: cnum_local
				},
				{
					type: '去程',
					from: this.item.startPortName,
					to: this.item.endPortName,
					ticket: '儿童票',
					price: this.item.cangInfo.halfPrice,
					num: ernum
				},
				{
					type: '去程',
					from: this.item.startPortName,
					to: this.item.endPortName,
					ticket: '儿童票(本地)',
					price: this.item.cangInfo.localHalfPrice,
					num: ernum_local
				}
				]
			}
		},
		createOrder() {
			if (this.carShow && this.passengerCarList.length === 0) return this.$showToast('请添加车辆');
			if (!this.carShow && this.passengerList.length === 0) return this.$showToast('请添加乘客');
			if (!this.carShow && !this.name) return this.$showToast('请填写联系人姓名');
			if (!this.$reg.mobile(this.phone)) return this.$showToast('请填写正确的联系人手机号');
			if (!this.agree) return this.$showToast('请选择预订协议');

			let exitMp = this.passengerList.find(p => p.mpChildList.length > 0);
			if (!exitMp) return this.mpTipShow = true;
			this.toCreateOrder();
		},
		toCreateOrder() {
			this.$login().then(res => {
				if (res === 0) {
					let params = JSON.parse(JSON.stringify(this.item));
					delete params.cangInfo;
					if (params.carInfo) delete params.carInfo;
					params.contactNum = this.phone;
					params.linkPerson = this.name;
					params.linkPhone = this.phone;
					params.sailDate = new Date(params.sailDate).Format('yyyy-MM-dd');
					let teTime = new Date().setMinutes(new Date().getMinutes() + 5);
					params.expireTime = new Date(teTime).Format('yyyy-MM-dd hh:mm:ss');
					params.foreOrderItemReqs = [];
					// params.totalFee = !this.goback?this.price:this.backMxList.reduce((cur,pre)=> cur+(pre.type=='去程'&&pre.num?pre.price*pre.num:0),0);
					params.totalFee = this.passengerList.length * this.item.cangInfo.totalPrice;
					params.totalPayFee = !this.goback ? this.price : this.backMxList.reduce((cur, pre) => cur +
						(pre.type == '去程' && pre.num ? pre.price * pre.num : 0), 0);
					params.openId = JSON.parse(uni.getStorageSync('userInfo')).openId;
					this.passengerList.forEach(d => {
						params.foreOrderItemReqs.push({
							"passName": d.passengerName,
							"priceType": d.personType,
							"credentialNum": d.card,
							"realFee": d.personType == 1 ? (d.discounts ? (this.item.cangInfo
								.localPrice || 0) : (this.item.cangInfo.totalPrice ||
									0)) : (d.discounts ? (this.item.cangInfo.localHalfPrice ||
										0) : (this.item.cangInfo.halfPrice || 0)),
							"passId": 193,
							"freeChildCount": d.childs,
							// "ticketFee": d.personType == 1 ? (d.discounts?(this.item.cangInfo.localPrice||0):(this.item.cangInfo.totalPrice||0)) : (d.discounts?(this.item.cangInfo.localHalfPrice||0):(this.item.cangInfo.halfPrice||0)),
							"ticketFee": this.item.cangInfo.totalPrice || 0,
							"seatClassName": this.item.cangInfo.className || '',
							"credentialType": d.cardType,
							"seatClass": this.item.cangInfo.classNum || '',
							// "isLocal": 0,
							"isLocal": d.discounts,
							"plateNum": "",
							"freeChildInfo": d.mpChildList.map(m => {
								return {
									parentCredential: this.$aesTm.encrypt(d.card, 3),
									childName: this.$aesTm.encrypt(m.passengerName, 1),
									card: this.$aesTm.encrypt(m.card, 3),
									type: m.cardType || 1
								}
							}),
							"ticPrice":this.item.cangInfo.ticPrice||''
						})
					})
					if (this.carShow) {
						this.passengerCarList.forEach(d => {
							params.foreOrderItemReqs.push({
								"passName": d.name,
								"priceType": 1,
								"credentialNum": d.idcard,
								"realFee": this.item.carInfo.totalPrice,
								"passId": 193,
								"freeChildCount": d.childs,
								"ticketFee": this.item.carInfo.totalPrice,
								"seatClassName": this.item.carInfo.className,
								"credentialType": d.cardType,
								"seatClass": this.item.carInfo.classNum,
								// "isLocal": 0,
								"isLocal": d.discounts,
								"plateNum": d.carno,
								"ticPrice":this.item.carInfo.ticPrice||''
							})
						})
						params.totalFee += this.passengerCarList.length * this.item.carInfo.totalPrice;
					}

					// 往返下单
					let backParams = null;
					if (this.goback) {
						backParams = JSON.parse(JSON.stringify(this.backItem));
						delete backParams.cangInfo;
						backParams.contactNum = this.phone;
						backParams.linkPerson = this.name;
						backParams.linkPhone = this.phone;
						backParams.sailDate = new Date(backParams.sailDate).Format('yyyy-MM-dd');
						let teTime = new Date().setMinutes(new Date().getMinutes() + 5);
						backParams.expireTime = new Date(teTime).Format('yyyy-MM-dd hh:mm:ss');
						backParams.foreOrderItemReqs = [];
						// backParams.totalFee = this.backMxList.reduce((cur,pre)=> cur+(pre.type=='返程'&&pre.num?pre.price*pre.num:0),0);
						backParams.totalFee = this.passengerList.length * this.backItem.cangInfo.totalPrice;
						backParams.totalPayFee = this.backMxList.reduce((cur, pre) => cur + (pre.type ==
							'返程' && pre.num ? pre.price * pre.num : 0), 0);
						backParams.openId = JSON.parse(uni.getStorageSync('userInfo')).openId;
						this.passengerList.forEach(d => {
							backParams.foreOrderItemReqs.push({
								"passName": d.passengerName,
								"priceType": d.personType,
								"credentialNum": d.card,
								"realFee": d.personType == 1 ? (d.discounts ? (this.backItem
									.cangInfo.localPrice || 0) : (this.backItem
										.cangInfo.totalPrice || 0)) : (d.discounts ? (this
											.backItem.cangInfo.localHalfPrice || 0) : (this
												.backItem.cangInfo.halfPrice || 0)),
								"passId": 193,
								"freeChildCount": d.childs,
								// "ticketFee": d.personType == 1 ? (d.discounts?(this.backItem.cangInfo.localPrice||0):(this.backItem.cangInfo.totalPrice||0)) : (d.discounts?(this.backItem.cangInfo.localHalfPrice||0):(this.backItem.cangInfo.halfPrice||0)),
								"ticketFee": this.backItem.cangInfo.totalPrice || 0,
								"seatClassName": this.backItem.cangInfo.className || '',
								"credentialType": d.cardType,
								"seatClass": this.backItem.cangInfo.classNum || '',
								"isLocal": d.discounts,
								"plateNum": "",
								"freeChildInfo": d.mpChildList.map(m => {
									return {
										parentCredential: this.$aesTm.encrypt(d.card, 3),
										childName: this.$aesTm.encrypt(m.passengerName, 1),
										card: this.$aesTm.encrypt(m.card, 3),
										type: m.cardType || 1
									}
								}),
								"ticPrice":this.backItem.cangInfo.ticPrice||''
							})
						})
					}

					if (!this.goback) {
						let newParams = JSON.parse(JSON.stringify(params));
						newParams.contactNum = this.$aesTm.encrypt(newParams.contactNum);
						newParams.linkPerson = this.$aesTm.encrypt(newParams.linkPerson);
						newParams.linkPhone = this.$aesTm.encrypt(newParams.linkPhone);
						newParams.foreOrderItemReqs.forEach(d => {
							d.credentialNum = this.$aesTm.encrypt(d.credentialNum);
							d.passName = this.$aesTm.encrypt(d.passName);
						})
						newParams.discountCouponUserId = this.coupon.id
						this.$api.post('/travel/api/ship/order/holding/save', newParams).then(res => {
							if (res.data.code === 0) {
								this.$refs.wxPay.payShow = true;
								this.orderId = res.data.data;
							} else this.$showModal(res.data.msg);
						})
					} else {
						let newParams = JSON.parse(JSON.stringify(params));
						newParams.contactNum = this.$aesTm.encrypt(newParams.contactNum);
						newParams.linkPerson = this.$aesTm.encrypt(newParams.linkPerson);
						newParams.linkPhone = this.$aesTm.encrypt(newParams.linkPhone);
						newParams.foreOrderItemReqs.forEach(d => {
							d.credentialNum = this.$aesTm.encrypt(d.credentialNum);
							d.passName = this.$aesTm.encrypt(d.passName);
						})
						let newbackParams = JSON.parse(JSON.stringify(backParams));
						newbackParams.contactNum = this.$aesTm.encrypt(newbackParams.contactNum);
						newbackParams.linkPerson = this.$aesTm.encrypt(newbackParams.linkPerson);
						newbackParams.linkPhone = this.$aesTm.encrypt(newbackParams.linkPhone);
						newbackParams.foreOrderItemReqs.forEach(d => {
							d.credentialNum = this.$aesTm.encrypt(d.credentialNum);
							d.passName = this.$aesTm.encrypt(d.passName);
						})
						newParams.discountCouponUserId = this.coupon.id
						this.$api.post('/api/shipTravelPlan/order/saveTravelPlan', {
							tqorderDTOStart: newParams,
							tqorderDTOSecond: newbackParams
						}).then(res => {
							if (res.data.code === 0) {
								this.$refs.wxPay.payShow = true;
								this.orderId = res.data.data;
							} else this.$showModal(res.data.msg);
						})
					}
				} else this.$refs['phoneNumber'].show = true;
			})
		},
		toAddPassenger() {
			this.addShow = true;
			this.mpChild = false;
			this.toGetPassengers(() => {
				this.addList.forEach((d, i) => {
					if (this.passengerCarList.find(p => p.idcard == d.card)) this.$set(this.addList[i], 'isDriver',
						true);
					else this.$set(this.addList[i], 'isDriver', false);

					if (this.passengerList.find(p => p.card == d.card)) this.$set(this.addList[i], 'isSelect',
						true);
					else this.$set(this.addList[i], 'isSelect', false);
				})
			})
		},
		addMpChild(item, index) {
			this.addShow = true;
			this.mpChild = true;
			this.mpIndex = index;
			this.toGetPassengers(() => {
				let mpTemp = [];
				this.passengerList.forEach(p => {
					p.mpChildList.forEach(mp => {
						if (!item.mpChildList.find(imp => imp.card == mp.card)) mpTemp.push(mp)
					})
				})

				this.addList.forEach((d, i) => {
					if (item.mpChildList.find(p => p.card == d.card)) this.$set(this.addList[i], 'isSelect', true);
					else this.$set(this.addList[i], 'isSelect', false);

					if (mpTemp.find(p => p.card == d.card)) this.$set(this.addList[i], 'mpSelected', true);
					else this.$set(this.addList[i], 'mpSelected', false);
				})
			})
		},
		//取退改票说明
		toInstructions() {
			uni.navigateTo({
				url: '/pagesIndex/steamerTicket/ticketingInstructions?title=取票、退票、改签说明'
			})
		},
		confirmMpAdd() {
			this.mpTipShow = false;
			this.toCreateOrder();
		},
		uToastShow(message) {
			this.$refs.uToast.show({ message })
		}
	}
}
</script>

<style scoped lang="less">
::v-deep .u-toast {
	position: relative;
	z-index: 10099;
}

.page {
	background: #F3F5F9;
	position: relative;
	// padding: 20rpx 24rpx 120rpx;
	.cellBox2 {
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 16rpx;
		// padding: 12rpx;
		margin: 24rpx 0;
		padding: 35rpx 30rpx;
		display: flex;
		justify-content: space-between;
	
		.cellBox-left {
			display: flex;
			align-items: center;
	
			.icon {
				border-radius: 6rpx;
				background-color: #ff4141;
				width: 30rpx;
				height: 30rpx;
				color: #fff;
				font-size: 20rpx;
				text-align: center;
				line-height: 30rpx;
				margin-right: 10rpx;
			}
	
			.title {
				color: #666666;
				font-size: 30rpx;
				font-weight: Regular;
				// margin-left: 260rpx;
			}
		}
	
		.cellBox-right {
			display: flex;
			width: 70%;
			justify-content: space-between;
			align-items: center;
	
			.cellBox-text {
				color: #aaaaaa;
				font-size: 28rpx;
				// margin-left: 260rpx;
			}
	
			.image {
				width: 24rpx;
				height: 24rpx;
	
				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
	.hander-one {
		background-image: url('https://i.ringzle.com/file/20240129/323bce42369f4d228d5653b8a4249095.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		height: 468rpx;
		box-sizing: border-box;
	}

	.info {
		box-sizing: border-box;
		padding: 35rpx 24rpx;
		// background: linear-gradient(to right, #3092E0, #45B7DE);
		background-color: #007A69;
		border-radius: 16rpx;

		.i_date {
			display: flex;
			align-items: center;
			justify-content: space-between;

			text {
				font-size: 30rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;

				&:nth-child(2) {
					margin: 0 20rpx;
				}

				&:last-child {
					margin-left: 20rpx;
				}
			}
		}

		.i_address {
			display: flex;
			align-items: center;
			margin: 25rpx 0 30rpx;

			text {
				font-size: 30rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;

				&:nth-child(2) {
					margin: 0 20rpx;
				}
			}
		}

		.i_ship {
			display: flex;
			align-items: center;

			&>view {
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;

				&:nth-child(2) {
					margin: 0 15rpx;
					padding: 0 15rpx;
					border-left: 1rpx solid #FFFFFF;
					border-right: 1rpx solid #FFFFFF;
				}
			}
		}

		.i_line {
			height: 1rpx;
			opacity: 0.2;
			border: 1rpx solid #FFFFFF;
			margin: 36rpx 0 29rpx;
		}

		.i_memo {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.im_left {
				display: flex;
				align-items: center;

				.iml_box {
					width: 60rpx;
					height: 36rpx;
					background: #E4F4FF;
					border-radius: 6rpx;
					line-height: 36rpx;
					text-align: center;
					font-size: 20rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #007A69;
				}

				.iml_text {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					margin-left: 15rpx;
					display: flex;
					flex-direction: column;

					text {
						&:last-child {
							margin-top: 12rpx;
						}
					}
				}
			}

			.im_right {
				display: flex;
				align-items: center;

				.imr_img1 {
					width: 26rpx;
					height: 26rpx;
				}

				text {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFE765;
					margin-left: 6rpx;
				}

				.imr_img2 {
					width: 24rpx;
					height: 24rpx;
				}
			}
		}
	}

	.notice_info {
		width: 100%;
		padding: 20rpx 24rpx 20rpx 0;
		box-sizing: border-box;
		background: #FFFDF7;
		display: flex;
		align-items: flex-start;

		text {
			padding-left: 8rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #FEA400;
			line-height: 33rpx;
		}
	}

	.passenger {
		padding: 40rpx 24rpx;
		background: #fff;
		border-radius: 16rpx 16rpx 0rpx 0rpx;

		.p_title {
			display: flex;
			align-items: center;

			text {
				font-size: 32rpx;
				font-family: PingFang-SC-Bold, PingFang-SC;
				font-weight: bold;
				color: #111111;
			}

			span {
				margin-left: 6rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
				line-height: 24rpx;
			}
		}

		.p_add {
			margin-top: 40rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			// border-radius: 16rpx;
			// border: 1rpx dotted #007A69;
			background-image: url('https://i.ringzle.com/file/20240306/a9c7c82c48b4436daa030a266ea763c9.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
			padding: 16rpx;

			image {
				width: 32rpx;
				height: 32rpx;
			}

			text {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: bold;
				color: #007A69;
				margin-left: 8rpx;
			}
		}
	}

	.contacts {
		margin-top: 20rpx;

		.c_info {
			padding: 40rpx 24rpx 28rpx;
			background: #fff;
			border-radius: 16rpx;

			&>text {
				font-size: 32rpx;
				font-family: PingFang-SC-Bold, PingFang-SC;
				font-weight: bold;
				color: #111111;
			}

			.ci_inp {
				display: flex;
				align-items: center;
				justify-content: space-between;

				&.mt48 {
					margin-top: 48rpx;
				}

				text {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: Regular;
					color: #111111;
				}

				input {
					border: none;
					outline: none;
					text-align: right;

					&::placeholder {
						font-size: 26rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: Regular;
						color: #AAAAAA;
					}
				}

				image {
					margin-left: 36rpx;
					width: 36rpx;
					height: 36rpx;
				}
			}

			.ci_line {
				height: 1rpx;
				background: #EFEFEF;
				margin: 28rpx 0;
			}
		}

		.c_memo {
			background: #FFF9F4;
			border-radius: 0rpx 0rpx 16rpx 16rpx;
			padding: 24rpx;
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FF7D01;
		}
	}

	.agree {
		// position: absolute;
		// bottom: 120rpx;
		display: flex;
		align-items: center;
		padding: 51rpx 0 51rpx;

		image {
			width: 32rpx;
			height: 32rpx;
			margin-right: 16rpx;
		}

		text {
			font-size: 26rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #666666;

			&:last-child {
				color: #007A69;
				margin-left: 10rpx;
			}
		}
	}

	.bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		width: calc(100% - 60rpx);
		background: #fff;
		box-shadow: 0rpx -1rpx 8rpx 0rpx rgba(0, 0, 0, 0.06);
		padding: 16rpx 30rpx 36rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		z-index: 9;

		.b_left {
			display: flex;
			align-items: center;

			&>text {
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;
			}

			&>view {
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FF4141;
				margin-left: 16rpx;

				span {
					font-size: 48rpx;
					font-family: DINAlternate-Bold, DINAlternate;
					font-weight: bold;
					color: #FF4141;
				}
			}
		}

		.b_right {
			display: flex;
			align-items: center;

			.br_left {
				display: flex;
				align-items: center;

				text {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #666666;
				}

				image {
					width: 24rpx;
					height: 24rpx;
					margin-left: 8rpx;
				}
			}

			.br_right {
				width: 220rpx;
				height: 80rpx;
				// background: linear-gradient(90deg, #FF7D43 0%, #FEAC2C 100%);
				background-color: #007A69;
				border-radius: 40rpx;
				line-height: 80rpx;
				text-align: center;
				font-size: 32rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				margin-left: 24rpx;
			}
		}
	}

	.details {
		padding: 40rpx 30rpx 200rpx;
		min-height: 400rpx;

		.title {
			position: relative;
			text-align: center;

			text {
				font-size: 36rpx;
				font-family: PingFang-SC-Bold, PingFang-SC;
				font-weight: bold;
				color: #333333;
			}

			image {
				width: 36rpx;
				height: 36rpx;
				position: absolute;
				right: 10rpx;
				top: 50%;
				margin-top: -18rpx;
			}
		}

		.address {
			font-size: 32rpx;
			font-family: PingFang-SC-Bold, PingFang-SC;
			font-weight: bold;
			color: #333333;
			margin-top: 48rpx;
		}

		.tickets {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 42rpx;

			&>text {
				font-size: 26rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #777777;
			}

			&>view {
				font-size: 28rpx;
				font-family: PingFang-SC-Bold, PingFang-SC;
				font-weight: bold;
				color: #333333;

				span {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #777777;
				}
			}
		}

		.total {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 61rpx;

			text {
				font-size: 32rpx;
				font-family: PingFang-SC-Bold, PingFang-SC;
				font-weight: bold;
				color: #333333;
			}

			view {
				height: 36rpx;
				font-size: 32rpx;
				font-family: PingFang-SC-Bold, PingFang-SC;
				font-weight: bold;
				color: #333333;
			}
		}

		.d_middle {
			padding: 40rpx 0 0rpx;
			max-height: 550rpx;
			overflow-y: auto;

			&>view {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 40rpx 0;

				&:first-child {
					border-top: 1rpx solid #EFEFEF;
				}

				&>text {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
				}

				&>view {
					font-size: 30rpx;
					font-family: PingFang-SC-Bold, PingFang-SC;
					font-weight: bold;
					color: #333333;
					display: flex;
					align-items: center;

					span {
						font-size: 26rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #777777;
						margin-left: 10rpx;
					}
				}
			}
		}

		.has_info {
			.add_user {
				height: 88rpx;
				border-radius: 16rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				background: #fff;
				margin-top: 48rpx;
				border: 1rpx dotted #007A69;


				image {
					width: 30rpx;
					height: 30rpx;
					margin-right: 12rpx;
				}

				text {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: bold;
					color: #007A69;
					margin-left: 12rpx;
					letter-spacing: 2rpx;
				}
			}

			.add_list {
				padding-top: 30rpx;
				max-height: 478rpx;
				overflow-y: auto;

				.sac_item {
					display: flex;
					align-items: center;
					padding: 36rpx 24rpx;

					.chk {
						width: 38rpx;
						height: 38rpx;
					}

					.si_info {
						width: calc(100% - 96rpx);
						padding-left: 22rpx;

						.name {
							display: flex;
							align-items: center;

							view:first-child {
								font-size: 32rpx;
								font-family: PingFang-SC-Bold, PingFang-SC;
								font-weight: bold;
								color: #111111;
								line-height: 32rpx;
							}

							view:last-child {
								padding: 6rpx 8rpx;
								line-height: 24rpx;
								text-align: center;
								background: #F5F8FA;
								border-radius: 8rpx;
								font-size: 24rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #94A9C8;
								margin: 5rpx 0 0 28rpx;
							}
						}

						.idcard {
							margin-top: 20rpx;

							&>text {
								font-size: 24rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #111111;
								line-height: 24rpx;

								&:first-child {
									color: #AAAAAA;
									margin-right: 10rpx;
								}
							}
						}
					}

					.edit {
						width: 36rpx;
						height: 36rpx;
					}
				}
			}
		}

		.add_submit {
			width: calc(100% - 60rpx);
			height: 88rpx;
			background: #007A69;
			border-radius: 44rpx;
			position: fixed;
			bottom: 69rpx;
			font-size: 32rpx;
			font-family: PingFang-SC-Bold, PingFang-SC;
			font-weight: bold;
			color: #FFFFFF;
			line-height: 88rpx;
			text-align: center;
		}
	}

	.passengers {
		.p_item_new {
			margin-top: 32rpx;

			.pin_top {
				display: flex;
				align-items: center;

				.p_del {
					width: 36rpx;
					height: 36rpx;
				}

				.pint_right {
					width: calc(100% - 36rpx);
					padding-left: 20rpx;
					box-sizing: border-box;

					.pintr_info {
						display: flex;
						align-items: center;

						.name {
							font-family: PingFang-SC, PingFang-SC;
							font-weight: bold;
							font-size: 30rpx;
							color: #333333;
							line-height: 32rpx;
						}

						.card {
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #999999;
							line-height: 24rpx;
							margin-left: 16rpx;
						}

						.type {
							width: 82rpx;
							height: 32rpx;
							background: rgba(0, 122, 105, 0.05);
							border-radius: 8rpx;
							line-height: 32rpx;
							text-align: center;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 22rpx;
							color: #94A9C8;
							margin-left: 8rpx;
						}
					}

					.pintr_add {
						margin-top: 32rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;

						text {
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 28rpx;
							color: #333333;
							line-height: 28rpx;
						}

						.add {
							display: flex;
							align-items: end;

							span {
								color: #007A69;
								font-size: 22rpx;
							}

							text {
								font-family: PingFang-SC, PingFang-SC;
								font-weight: bold;
								font-size: 26rpx;
								color: #007A69;
								line-height: 26rpx;
							}
						}
					}
				}
			}

			.pin_childs {
				margin-top: 32rpx;
				width: 100%;
				padding: 24rpx 20rpx;
				box-sizing: border-box;
				background: #F4F9F8;

				.pc_item {
					margin-top: 24rpx;
					display: flex;
					align-items: center;

					&:first-child {
						margin-top: 0;
					}

					.title {
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 20rpx;
						color: #999999;
						line-height: 24rpx;
					}

					.name {
						font-family: PingFang-SC, PingFang-SC;
						font-weight: bold;
						font-size: 28rpx;
						color: #666666;
						line-height: 32rpx;
						margin-left: 19rpx;
					}

					.card {
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #999999;
						line-height: 24rpx;
						margin-left: 16rpx;
					}

					.type {
						width: 92rpx;
						height: 32rpx;
						background: rgba(0, 122, 105, 0.05);
						border-radius: 8rpx;
						margin-left: 12rpx;
						line-height: 32rpx;
						text-align: center;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 20rpx;
						color: #94A9C8;
					}
				}
			}
		}
	}

	.local_box {
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background: rgba(0, 0, 0, .2);
		z-index: 99999;
		display: flex;
		align-items: center;
		justify-content: center;

		.lb_content {
			width: calc(100% - 146rpx);
			background: url(https://i.ringzle.com/file/20231120/34d7fbc7c6064af6ab2a2e0dfa339666.png) no-repeat;
			background-size: 100% 100%;
			border-radius: 24rpx;
			padding: 143rpx 38rpx 44rpx;
			box-sizing: border-box;
			position: relative;
			z-index: 11;

			.lbc_tip {
				text-align: center;
				font-size: 30rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 48rpx;
			}

			.lbc_btn {
				width: calc(100% - 48rpx);
				height: 88rpx;
				background: #007A69;
				box-shadow: 0rpx 6rpx 16rpx 0rpx rgba(13, 191, 253, 0.3);
				border-radius: 44rpx;
				line-height: 88rpx;
				text-align: center;
				font-size: 32rpx;
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				color: #FFFFFF;
				letter-spacing: 2rpx;
				margin: 63rpx 24rpx 0;
			}

			.lbc_btns {
				width: calc(100% - 76rpx);
				height: 88rpx;
				margin: 63rpx 38rpx 0;
				display: flex;
				justify-content: space-between;

				&>view {
					width: calc(50% - 14rpx);
					height: 100%;
					border-radius: 44rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 32rpx;

					&.lb_qx {
						border: 1rpx solid #007A69;
						color: #007A69;
					}

					&.lb_qd {
						background: #007A69;
						color: #FFFFFF;
					}
				}
			}

			image {
				width: 255rpx;
				height: 168rpx;
				position: absolute;
				left: 50%;
				margin-left: -127.5rpx;
				top: -60rpx;
				z-index: 12;
			}
		}
	}
}
</style>
<style>
.u-swipe-action-item__right__button__wrapper {
	background: #F55454 !important;
	font-size: 32rpx;
	font-family: PingFang-SC-Bold, PingFang-SC;
	font-weight: bold;
	color: #FFFFFF;
	letter-spacing: 2rpx;
}
</style>